<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="user-scalable=no"/>
	<title>表单元素及布局</title>
	<link rel="stylesheet" href="../common/jquery.mobile-1.1.0.min.css" /> 
	<link rel="stylesheet" href="../common/BingoTouch.css" />
	<script src="../common/iscroll.js"></script>
	<script src="../common/jquery-1.7.1.min.js"></script>
	<script src="../common/jquery.mobile-1.1.0.min.js"></script>
	<script src="../common/BingoTouch.js"></script><!-- 
	<link rel="stylesheet/less" type="text/css" href="../common/styles.less">
	<script src="../common/less-1.3.0.min.js"></script>  -->
	
</head>
<body>
<div data-role="page" class="container">
   <div data-role="content">
		<div class="header">
			<h1 class="title">Form</h1>
			<div class="header-left">
				<div class="btn-back" data-role="BTButton" data-url="home.html">返回</div>
			</div>
			<div class="header-right">
				<!-- 右边按钮区域 -->
			</div>
			<div class="toolbar">
				<div class="searchbar"><input type="text" value="" class="input-large"/><div class="btn-search" data-role="BTButton">搜索</div></div>
			</div>			
		</div>
		<div class="content">
			<div class="content-inner">	
				
				<!-- 带标题的列表菜单 -->
				<h2>1.列表布局表单-- mouseup=false 前2个点击弹出,保留了激活状态，第3个是点击跳转，不需要保留</h2>				
				<ul class="list-view list-view-head">				
					<li><div data-role="BTButton" mousedown="false">2列列表菜单</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right" mouseup="false">时间<label>2012年7月12日</label></div></li>
					<li><div class="btn-active" data-role="BTButton" data-icon="icon-list-right" icon-dir="right" mouseup="false">区域<label>广州市</label></span></div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">星级<label>一星</label></div></li>
					<li><div data-role="BTButton" mousedown="false">姓名姓名:<label><input type="text" value="" class="input-large"/></label></div></li>
					<li><div data-role="BTButton" mousedown="false">描述<label><textarea name="" id="" cols="30" rows="3"></textarea></label></div></li>
					<li><div data-role="BTButton">性别<label><div name="group5" data-role="BTRadio" class="BTCheck_ON" display="block">Radio</div></label></div></li>
					<li><div data-role="BTButton"><label><div name="group5" data-role="BTRadio" display="block">Radio2</div></label></div></li>
					<!-- Check1 点击文字选中 -->
					<li><div data-role="BTButton"><div data-role="BTCheck">点文字选中</div></div></li>
					<!-- Check2 点击整行有效 -->
					<li><div data-role="BTButton"><div data-role="BTCheck" display="block">点整行选中</div></div></li>
				</ul>
				<ul class="list-view list-view-head list-checkbox">				
					<li><div data-role="BTButton" mousedown="false">多选列表</div></li>
					<li><div data-role="BTButton" data-icon="BTCheck BTCheck_ON" icon-dir="left">checkbox在左边</div></li>
					<li><div data-role="BTButton" data-icon="BTCheck" icon-dir="right">checkbox在右边</div></li>
				</ul>
				<ul class="list-view list-view-head list-radio">				
					<li><div data-role="BTButton" mousedown="false">单选列表</div></li>
					<li><div data-role="BTButton" data-icon="BTCheck BTCheck_ON" icon-dir="left">radio在左边</div></li>
					<li><div data-role="BTButton" data-icon="BTCheck" icon-dir="right">radio在右边</div></li>
				</ul>
				<!-- web表单 -->
				<h2>2.web表单-左右布局</h2>
				<form class="form">
					<div class="control-group">
						<label>输入框标题</label><input type="text" class="input-large"/>
					</div>
					<div class="control-group">
						<label>搜索栏</label><div class="searchbar"><input type="text" value="" class="input-large"/><div class="btn-search" data-role="BTButton">搜索</div></div>
					</div>
					<div class="control-group">
						<label align="left">文本区</label><textarea class="input-large"></textarea>
					</div>
					<div class="control-group">
						<label>多选框</label><div data-role="BTCheck" class="BTCheck_ON">Check</div><div data-role="BTCheck" align="right">Check</div>
					</div>
					<div class="control-group">
						<label>下拉框</label><div id="BTSex" data-role="BTSelect" value="" selectedIndex="-1" data='{"title":"请选择性别","data":[{"text":"男性","value":0},{"text":"女性","value":1}]}'><span>请选择性别</span></div>
					</div>
					<div class="control-group">
						<label>下拉框2</label><select name="" id="">
							<option value="">1</option>
							<option value="">2</option>
						</select>
					</div>
					<div class="control-group">
						<label>单选框</label><div name="group1" data-role="BTRadio" class="BTCheck_ON">Radio</div><div name="group1" data-role="BTRadio" align="right">Radio</div>
					</div>
					<div class="control-group">
						<label>切换按钮</label><div data-role="BTSwitch">OFF</div>
					</div>
					<div class="control-group">
						<label>日期框</label><div id="BTDate" onChange="alert(document.all('BTDate').value);" data-role="BTDate" value="" data='{"title":"请选择日期"}'><span>请选择日期</span></div>
				
					</div>
					<table>
						<tr>
							<td>
								<div class="btn-primary" data-role="BTButton">提交</div>
							</td>
							<td>
								<div data-role="BTButton">重置</div>
							</td>
						</tr>
					</table>
				</form>
				<!-- web表单 -->
				<h2>3.web表单-控件宽度100%</h2>
				<form class="form-fluid">
					<div class="control-group">
						<label>输入框标题</label><input type="text" class="input-large"/>
					</div>
					<div class="control-group">
						<label>搜索栏</label><div class="searchbar"><input type="text" value="" class="input-large"/><div class="btn-search" data-role="BTButton">搜索</div></div>
					</div>
					<div class="control-group">
						<label>文本区</label><textarea class="input-large"></textarea>
					</div>
					<div class="control-group">
						<label>多选框</label><div data-role="BTCheck" class="BTCheck_ON">Checkbox</div>
					</div>
					<div class="control-group">
						<label>下拉框</label><div id="BTSex" data-role="BTSelect" value="" selectedIndex="-1" data='{"title":"请选择性别","data":[{"text":"男性","value":0},{"text":"女性","value":1}]}'><span>请选择性别</span></div>
					</div>
					<div class="control-group">
						<label>下拉框2</label><select name="" id="">
							<option value="">1</option>
							<option value="">2</option>
						</select>
					</div>
					<div class="control-group">
						<label>单选框</label><div data-role="BTRadio" name="group2">Radio</div><div data-role="BTRadio" name="group2">Radio</div>
					</div>
					<div class="control-group">
						<label>日期框</label><div id="BTDate" onChange="alert(document.all('BTDate').value);" data-role="BTDate" value="" data='{"title":"请选择日期"}'><span>请选择日期</span></div>
					</div>	
					<table>
						<tr>
							<td>
								<div class="btn-primary" data-role="BTButton">提交</div>
							</td>
							<td>
								<div data-role="BTButton">重置</div>
							</td>
						</tr>
					</table>				
				</form>
				<!-- web表单3 -->
				<h2>4.web表单-控件宽度100%-文本描述在里面的</h2>
				<form class="form-fluid">
					<div class="control-group">
						<input type="text" placeholder="输入框标题" class="input-large"/>
					</div>
					<div class="control-group">
						<div class="searchbar"><input type="text" placeholder="搜索栏" class="input-large"/><div class="btn-search" data-role="BTButton">搜索</div></div>
					</div>					
					<div class="control-group">
						<select name="" id="">
							<option value="">选择下拉框</option>
							<option value="">1</option>
							<option value="">2</option>
						</select>
					</div>
					<div class="control-group">
						<textarea class="input-large" placeholder="文本区"></textarea>
					</div>
					<div class="control-group">
						<div data-role="BTCheck" class="BTCheck_ON">Checkbox</div><div data-role="BTCheck" class="BTCheck_ON" align="right">Checkbox</div>
					</div>
					<table>
						<tr>
							<td>
								<div class="btn-primary" data-role="BTButton">提交</div>
							</td>
							<td>
								<div data-role="BTButton">重置</div>
							</td>
						</tr>
					</table>				
				</form>
			</div>
		</div>		
	</div>
</div>
</body>
</html>